<template>
    <div>
        <el-card style="margin-bottom: 5px">
            <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入任务名称进行查询"
                prefix-icon="Search"></el-input>
            <el-button type="primary" @click="queryTask">查 询</el-button>
            <el-button type="warning" @click="reset">重 置</el-button>
        </el-card>
    </div>

    <div>
        <el-card style="margin-bottom: 5px;">
            <el-button type="primary" @click="sendTask"><el-icon style="margin-right: 5px">
                    <Memo />
                </el-icon>发 布 任 务</el-button>
        </el-card>
    </div>

    <div>
        <el-card style="margin-bottom: 150px">
            完善功能
        </el-card>
    </div>

    <div>
        <el-dialog v-model="data.dialogShow" :show-close="false" width="1000" style="margin-bottom: 5px">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">任务内容</h4>
                    <el-button type="danger" @click="close">
                        <el-icon class="el-icon--left">
                            <CircleCloseFilled />
                        </el-icon>
                        关闭
                    </el-button>
                </div>
            </template>
            <div style="margin-left: 5px">
                <span>任务名称: <span v-html="data.taskName"></span></span>
            </div>
            <div class="editor-content-view" style="padding: 20px" v-html="data.context"></div>
        </el-dialog>
    </div>

    <!-- 新增 编辑任务 -->
    <div>
        <el-dialog v-model="data.dialogEdit" title="文章信息" width="880">
            <el-form ref="formRef" :rules="data.rules" :model="data.form">
                <el-form-item label="任务名称" prop="taskName">
                    <el-input v-model="data.form.taskName" placeholder="请输入任务名称" clearable />
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="任务类型" prop="type">
                            <el-select v-model="data.form.type" placeholder="请输选择任务类型" style="width: 240px">
                                <el-option label="工作" value="工作" />
                                <el-option label="学习" value="学习" />
                                <el-option label="卫生" value="卫生" />
                                <el-option label="通知" value="通知" />
                                <el-option label="其它" value="其它" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务难度" prop="level">
                            <el-select v-model="data.form.level" placeholder="请选择任务难易程度" style="width: 240px">
                                <el-option label="简单" value="简单" />
                                <el-option label="普通" value="普通" />
                                <el-option label="一般" value="一般" />
                                <el-option label="困难" value="困难" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!--  -->
                <!-- yyyy-MM-dd HH:mm:ss -->
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="开始时间" prop="startTime">
                            <div class="block">
                                <el-date-picker v-model="data.form.startTime" format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="任务开始时间" />
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束时间" prop="stopTime">
                            <div class="block">
                                <el-date-picker v-model="data.form.stopTime" format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="任务结束时间" />
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="发布级别" prop="formType">
                    <el-radio-group v-model="data.form.formType" size="small">
                        <el-radio value="正常" border>正 常</el-radio>
                        <el-radio value="加密" border>加 密</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="内容" prop="context">
                    <div style="border: 1px solid #ccc; width: 100%">
                        <Toolbar style="border-bottom: 1px solid #ccc; width: 100%" :editor="editorRef" :mode="mode" />
                        <Editor style="height: 500px; overflow-y: hidden" v-model="data.form.context" :mode="mode"
                            :defaultConfig="editorconfig" @onCreated="handleCreated" />
                    </div>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="data.form.description" style="width: 880px"
                        :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="任 务 描 述" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.dialogEdit = false">取消</el-button>
                    <el-button type="primary" @click="save"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

    <!-- 展示历史任务 -->
    <div>
        <span style="font-size: 14px; font-weight: bolder"><el-tag type="info" style="text-decoration: underline">历 史 任
                务 展
                示</el-tag></span>
        <el-card style="margin-top: 10px">
            <el-table :data="data.tableData" style="width: 100%; margin-top: 5px" height="350" max-height="400">
                <el-table-column fixed prop="type" label="任务类型" width="100" />
                <el-table-column prop="level" label="任务级别" width="80" />
                <el-table-column prop="formType" label="发布类型" width="80" />
                <el-table-column prop="taskName" label="任务名称" width="220">
                    <template #default="scope">
                        <span v-if="scope.row.taskName">{{
                            optimize(scope.row.taskName)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="135">
                    <template #default="scope">
                        <span v-if="scope.row.startTime">{{
                            optimizeTime(scope.row.startTime)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="stopTime" label="结束时间" width="135">
                    <template #default="scope">
                        <span v-if="scope.row.stopTime">{{
                            optimizeTime(scope.row.stopTime)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip="ellipsis" width="120" />
                <el-table-column prop="updateBy" label="修改者名" width="120" />
                <el-table-column prop="description" label="任务描述" width="600"
                    show-overflow-tooltip="ellipsis"></el-table-column>
                <el-table-column fixed="right" label="操   作" min-width="80">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="showTask(scope.row)">
                            <el-tag type="primary">查 看</el-tag>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>


</template>

<script setup>
import { addTask, selectTaskByTaskName, taskAll } from "@/api/task";
import "@/assets/view.css";
import { reactive, shallowRef, onMounted, onBeforeMount, ref } from "vue";
import { Message, Memo } from "@element-plus/icons-vue"; //导入按钮的ui图标
import { ElMessage } from "element-plus";
import "@wangeditor/editor/dist/css/style.css"; //引入css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const data = reactive({
    tableData: [],
    name: "", //搜索用的 任务的名字
    dialogEdit: false, //发布任务的弹窗
    dialogShow: false, //展示任务内容的弹窗
    taskName: null, //任务名称
    context: null,

    form: {}, //编辑任务 的文本

    rules: {
        taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择任务分类", trigger: "blur" }],
        level: [{ required: true, message: "请输入任务难度", trigger: "blur" }],
        startTime: [
            { required: true, message: "请选择任务开始时间", trigger: "blur" },
        ],
        stopTime: [
            { required: true, message: "请选择任务结束时间", trigger: "blur" },
        ],
        formType: [{ required: true, message: "请选择发送级别", trigger: "blur" }],
        context: [{ required: true, message: "请输入任务内容", trigger: "blur" }],
    },


})

const formRef = ref()

//定义富文本内容
const editorRef = shallowRef() //编辑器实例
const mode = "default"
const editorconfig = { MENU_CONF: {} }

onBeforeMount(() => {
    const edior = editorRef.value
    if (edior == null) return
    edior.destory()
})
//记录 editor 实例！！！！！
const handleCreated = (editor) => {
    editorRef.value = editor
}

//展示任务内容的弹窗
const showTask = (context) => {
    data.dialogShow = true;
    data.context = JSON.parse(JSON.stringify(context.context));
    data.taskName = context.taskName;
};

//发布任务的按钮
const sendTask = () => {
    data.dialogEdit = true;
    data.form = {};
};
//确定函数
const save = () => {
    data.form.id ? editTask() : forWardTask()
}
//编辑任务的函数
//后续需要权限问题
const editTask = () => { }
//编辑任务的函数
const forWardTask = async () => {
    //发布任务 ---->
    await formRef.value.validate((valid) => {
        if (valid) {
            data.dialogEdit = false
            addTask(data.form).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success("操作成功");
                    load();
                } else {
                    ElMessage.error("操作失败");
                }
            })
        } else {
            ElMessage.error('表单验证失败')
        }
    })

}

//优化展示过成的任务名称
const optimize = (row) => {
    return row.substring(0, 8) + "......"
}
//优化时间的展示
const optimizeTime = (time) => {
    return time.substring(0, 11)
}

// 搜索功能
const queryTask = async () => {
    await selectTaskByTaskName(data.name).then((res) => {
        if (res.data.code == 200) {
            ElMessage.success("搜索成功")
            data.tableData = res.data.data
        } else {
            ElMessage.error("搜索失败")
        }
    })
}

//刷新方法
const load = async () => {
    await taskAll().then((res) => {
        data.tableData = res.data.data
    })
}

load()

//重置函数
const reset = () => {
    data.name = null
    load()
}
</script>

<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

/* 选择时间组件 */
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-datetime-picker .block:last-child {
    border-right: none;
}

.demo-datetime-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>